@charset "utf-8";
@import "common";
//首页
.web {
    width: 100%;
    height: 100%;
    position: relative;
    .article2_content {
        position: absolute;
        top: r(90px);
        bottom: r(95px);
        left: 0;
        width: 100%;
        //              height: 100%;
        overflow: auto;
        overflow-x: hidden;
        overflow-y: scroll;
        -webkit-overflow-scrolling: touch;
        .article2body {
            width: r(583px);
            height: 100%;
            margin: auto;
            .main_body {
                width: 100%;
                font-size: 14px;
                color: #8b8b8b;
                >h1 {
                    font-size: 16px;
                    color: black;
                }
                .article2_like {
                    font-size: 0;
                    text-align: right;
                    i,
                    span {
                        font-size: 12px;
                        color: #c9c9c9;
                    }
                    div {
                        display: inline-block;
                        &:first-child {
                            margin-right: r(45px);
                        }
                    }
                }
                .posted_time {
                    font-size: 0;
                    text-align: right;
                    span {
                        font-size: 12px;
                        color: #c9c9c9;
                        &:nth-child(2) {
                            color: red;
                        }
                    }
                }
                p {
                    font-size: 12px;
                    text-indent: 2em;
                }
                h2 {
                    font-size: 14px;
                    text-indent: 2em;
                    color: #010101;
                }
                .photo {
                    width: 100%;
                    img {
                        width: 100%;
                    }
                }
            }
            //其他文章
            .other_article {
                width: 100%;
                height: r(80px);
                display: flex;
                align-items: center;
                a {
                    font-size: 14px;
                    color: #c5c5c5;
                    span {
                        &:first-child {
                            color: black;
                            font-weight: 600;
                        }
                    }
                }
            }
            //其他文章结束
            //          登录评论开始
            .comment {
                width: 100%;
                height: r(455px);
                .collect {
                    width: 100%;
                    height: r(190px);
                    border-bottom: 1px solid #7D7D7D;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    a {
                        width: r(73px);
                        height: r(100px);
                        display: block;
                        text-align: center;
                        margin-right: r(55px);
                        &:last-child {
                            margin-right: 0;
                        }
                        div {
                            width: r(72px);
                            height: r(72px);
                            border: 1px solid #8d8d8d;
                            border-radius: 50%;
                            display: flex;
                            justify-content: center;
                            align-items: center;
                            i {
                                font-size: r(40px);
                                color: #c5c5c5;
                            }
                        }
                        p {
                            font-size: 14px;
                            color: #8d8d8d;
                        }
                    }
                }
            }
            //登录评论结束
            //发表评论
            .login_comment {
                width: 100%;
                height: r(190px);
                border-bottom: 1px solid #7D7D7D;
                text-align: center;
                a {
                    color: red;
                    text-decoration: underline;
                    font-size: 14px;
                    line-height: r(190px);
                }
                span {
                    color: #c5c5c;
                    font-size: 14px;
                }
            }
            //发表评论结束
            //发表评论键
            .login_bottom {
                width: r(395px);
                height: r(53px);
                margin: auto;
                padding-top: r(17px);
                margin-bottom: r(48px);
                a {
                    line-height: r(53px);
                    font-size: 14px;
                    color: white;
                    display: block;
                    background: #b20000;
                    text-align: center;
                }
            }
            //发表评论键结束
            //用户评论
            .comment2 {
                p {
                    font-size: 14px;
                    a {
                        text-decoration: underline;
                    }
                }
                .user_comment {
                    width: r(583px);
                    height: r(183px);
                    ul {
                        li {
                            font-size: 0;
                            a {
                                display: inline-block;
                                div {
                                    display: inline-block;
                                    width: r(50px);
                                    height: r(50px);
                                    vertical-align: middle;
                                    img {
                                        width: 100%;
                                        height: 100%;
                                        border-radius: 50%;
                                    }
                                }
                                span {
                                    color: #000000;
                                    vertical-align: middle;
                                }
                            }
                            span {
                                font-size: 12px;
                                color: #C5C5C5;
                                vertical-align: middle;
                            }
                        }
                        .text {
                            p {
                                color: #444444;
                            }
                            span {
                                display: block;
                                text-align: right;
                            }
                        }
                        .number_comment {
                            text-align: right;
                            span {
                                color: #444444;
                            }
                            i {
                                font-size: r(32px);
                                vertical-align: -webkit-baseline-middle;
                            }
                        }
                    }
                }
                //下拉弹出评论
                .comment_pulldown {
                    width: r(583px);
                    height: r(400px);
                    .pulldown {
                        width: r(538px);
                        height: r(378px);
                        background: #fafafa;
                        margin: auto;
                        ul {
                            padding: r(20px);
                            li {
                                border-bottom: 1px dotted #c2c2c2;
                                .else_commont {
                                    display: flex;
                                    a {
                                        width: 30%;
                                        .user_img {
                                            width: r(50px);
                                            height: r(50px);
                                            img {
                                                width: 100%;
                                                height: 100%;
                                                border-radius: 50%;
                                            }
                                            span {
                                                font-size: 14px;
                                            }
                                        }
                                    }
                                }
                                .text {
                                    width: 70%;
                                    display: inline-block;
                                    p {
                                        overflow: hidden;
                                        text-overflow: ellipsis;
                                        display: -webkit-box;
                                        -webkit-line-clamp: 2;
                                        -webkit-box-orient: vertical;
                                    }
                                }
                            }
                            .time {
                                font-size: 12px;
                                color: #C5C5C5;
                                text-align: right;
                            }
                        }
                        .oneself_comment {
                            textarea {
                                width: 100%;
                            }
                            input[type="button"] {
                                width: r(173px);
                                height: r(47px);
                                background: #b20000;
                                color: white;
                                float: right;
                            }
                        }
                    }
                }
                //下拉弹出评论结束
            }
            //用户评论结束
        }
    }
}